{% extends "base.pug" %}
{% block title %}复习主页{% endblock %}
{% block css %}
script $(function () {$('.list-block').on('click', function (e) {document.location.href = $(this).attr('href');})});
  |  $(document).keyup(function (e) {if (67 == e.keyCode) {document.location = '/calendar/';}});
style
  | .list-block{
  |     width: 7rem;
  |     padding: 10px;
  |     box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  |     border-radius: .25rem!important;
  |     text-align: center;
  |     margin: 10px;
  |     cursor: pointer;
  | }
  | .progress{ 
  |     font-size: 10px;
  |     height: 13px;
  | }
{% endblock %}

{% block content %}
div.container.flex-column
  div.text-center
    a(style="color:black;" href="https://github.com/Benature/WordReview") 
      i.icon-github
      | &nbsp;Github: Benature
  a(style="text-align:end;" href="/calendar/") 艾宾浩斯复习日历
  {% for d in data%}
  h2(style="margin-top:20px;") {{d.name}}
  div.d-flex.flex-wrap
    {% for l in d.lists %}
    div.list-block(href='/review/review?list={{l.i}}&book={{d.name_en}}')
      {% if l.index == 0 %}
      h4 List {{l.i|add:1}}
      {% else %}
      h4 List {{l.i}}
      {% endif %}
      div
        a {{l.len}}
        sub(style="font-size:10px; color: grey;") {{l.del_len}} 
        a  [{{l.times}}次]
      div.progress(style="width:100%;")
        div.progress-bar(style="width:{{l.rate}}%; background-color: #7998e0;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100")
          | {{l.rate}}%
      div.progress(style="width:100%;margin-top: 3px;")
        div.progress-bar(style="width:{{l.recent_rate}}%; background-color: #72d4c7;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100")
          | {{l.recent_rate}}%
    {% endfor %}
  {% endfor %}
  a(style="text-align:end;margin-top:30px" href="/import/") 我要导入新的单词书
  hr
  div.text-center(style="margin-bottom: 130px;")
    a(style="color:black;" href="https://github.com/Benature/WordReview/issues") 
      i.icon-github
      | &nbsp;意见反馈
{% endblock %}